/**
 *  学习目标：
 */
import React from 'react'

export default class App extends React.Component {
  state = {
    count: 1,
    msg: 'Hello!',
  }

  render() {
    return (
      <>
        <h1>知识点标题</h1>
        <h2>count:{this.state.count}</h2>
        <h2>msg:{this.state.msg}</h2>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>点击加1</button>
        <button onClick={() => this.setState({ msg: this.state.msg + '啊！' })}>点击啊一声</button>
      </>
    )
  }

  // React 可通过 componentDidUpdate 钩子实现类似 Vue 中的 watch 功能
  componentDidUpdate(prevProps, prevState) {
    // console.log(this.state, prevState)
    // console.log(newVal, oldVal)
    // count 新值和旧值不一样，说明 count 变化了(Vue的watch)
    if (this.state.count !== prevState.count) {
      console.log('count变化了，实现Vue的watch')
    }
  }
}
